<template>
	<view class="sy">
		<view class="wrop" v-bind:class="[{sw_back :index == 0},{sw_back1 :index == 1},{sw_back2 :index == 2}]">
			<search class="search" />
			<swiper class="sw" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				@change="change">
				<swiper-item class="sw_item" v-for="item in swiperList">
					<image class="sw_image" :src="item.imageUrl" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="cate">
			<view class="cate_item" v-for="(item,index) in cateList" v-show="!(index>=7)">
				{{item.name}}
			</view>
			<view class="cate_item">
				全部课程
			</view>
		</view>
		<view class="kc">
			<view class="pai">
				<view class="tap">
					<view class="title">
						<view class="zi">
							热门推荐
						</view>
						<view class="biao">
							HOT
						</view>
					</view>
					<view class="goQuan">
						<view class="zi">
							全部 >
						</view>
					</view>
				</view>
				<!-- 课程 -->
				<swiper style="height: 1200rpx;" next-margin="30rpx">
					<swiper-item v-for="i in (hotList.length/5)">
						<classs :kcItem="item" :name="hot" v-for="item in hotList" />
					</swiper-item>
				</swiper>
			</view>

			<view class="pai">
				<view class="tap">
					<view class="title">
						<view class="zi">
							近期上新
						</view>
						<view class="biao">
							NEW
						</view>
					</view>
					<view class="goQuan">
						<view class="zi">
							全部 >
						</view>
					</view>
				</view>
				<!-- 课程 -->
				<swiper next-margin="350rpx" style="height: 380rpx;">
					<swiper-item v-for="item in newList">
						<classs :kcItem="item" :name="ne" />
					</swiper-item>
				</swiper>
			</view>
			<view class="pai">
				<view class="tap">
					<view class="title">
						<view class="zi">
							免费精选
						</view>
						<view class="biao">
							FREE
						</view>
					</view>
					<view class="goQuan">
						<view class="zi">
							全部 >
						</view>
					</view>
				</view>
				<!-- 课程 -->
				<swiper style="height: 1200rpx;" next-margin="30rpx">
					<swiper-item v-for="i in (freeList.length/5)">
						<classs :kcItem="item" :name="free" v-for="item in freeList" />
					</swiper-item>
				</swiper>
			</view>
			<view class="pai">
				<view class="tap">
					<view class="title">
						<view class="zi">
							付费精品
						</view>
						<view class="biao">
							NICE
						</view>
					</view>
					<view class="goQuan">
						<view class="zi">
							全部 >
						</view>
					</view>
				</view>
				<!-- 课程 -->
				<classs :kcItem="item" :name="nofree" v-for="item in nofreeList" />
			</view>
		</view>
	</view>
</template>

<script>
	import search from "../../components/search/search.vue"
	import classs from "../../components/classs/classs.vue"
	import {
		API
	} from "../../api/index.js"
	import {
		SAPI
	} from "../../api/search.js"
	const indexApi = new API()
	const searchApi = new SAPI()
	export default {
		components: {
			search,
			classs
		},
		data() {
			return {
				hot: "热",
				ne: "新",
				free: "免",
				nofree: "精",
				swiperList: [],
				cateList: [],
				index: 0,
				hotForm: {
					current: 1,
					size: 8,
					sort: "hot"
				},
				hotList: [],
				freeForm: {
					current: 1,
					isFree: 1,
					size: 8
				},
				freeList: [],
				newForm: {
					current: 1,
					size: 10,
					sort: "new"
				},
				newList: [],
				nofreeForm: {
					current: 1,
					isFree: 0,
					size: 8
				},
				nofreeList: []
			}
		},
		onLoad() {
			console.log(API)
			// 获取轮播图
			indexApi.getSwiper().then(res => {
				// console.log(res)
				this.swiperList = res
			})
			// 获取分类列表
			indexApi.getCateList().then(res => {
				// console.log(res)
				this.cateList = res
			})
			// 获取热
			searchApi.search(this.hotForm).then(res => {
				this.hotList = res.records
				console.log(res)
			})
			// 获取免费
			searchApi.search(this.freeForm).then(res => {
				this.freeList = res.records
				console.log(res)
			})
			// 获取新
			searchApi.search(this.newForm).then(res => {
				this.newList = res.records
				console.log(res)
			})
			// 获取收费
			searchApi.search(this.nofreeForm).then(res => {
				this.nofreeList = res.records
				console.log(res)
			})
		},
		methods: {
			change(e) {
				// console.log(e.detail.current)
				this.index = e.detail.current
			}
		}
	}
</script>

<style lang="scss">
	.sy {
		width: 100%;
		height: 100%;

		.wrop {
			width: 750rpx;
			height: 470rpx;

			.search {
				position: fixed;
				top: 0;
				z-index: 999999;
			}

			.sw {
				width: 750rpx;
				height: 375rpx;
				padding-top: 100rpx;

				.sw_item {
					width: 690rpx !important;
					height: 375rpx !important;
					padding: 0 30rpx;

					.sw_image {
						width: 690rpx;
						height: 375rpx;
						border-radius: 20rpx;
					}
				}
			}

		}

		.sw_back {
			background-image: linear-gradient(rgb(0, 108, 0) 50%, rgb(255, 255, 255));
		}

		.sw_back1 {
			background-image: linear-gradient(rgb(69, 50, 140) 50%, rgb(255, 255, 255));
		}

		.sw_back2 {
			background-image: linear-gradient(rgb(0, 114, 183) 50%, rgb(255, 255, 255));
		}

		.cate {
			width: 750rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;

			.cate_item {
				flex: 25%;
				width: 80px;
				height: 35px;
				background-color: #f8f9fb;
				text-align: center;
				line-height: 35px;
				font-size: 13px;
				border-radius: 10px;
				overflow: hidden;
				margin-top: 7px;
			}
		}

		.kc {
			padding: 0 30rpx;

			.pai {
				.tap {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						display: flex;
						justify-content: start;
						align-items: center;

						.zi {
							font-size: 19px;
							font-weight: 500;
							color: #303133;
							margin-right: 5px;
						}

						.biao {
							background-image: linear-gradient(90deg, #fb6932, #fa140e);
							padding: 0 5px;
							border-radius: 15px 15px 15px 0;
							font-size: 10px;
							color: #FFFFFF;
						}
					}

					.goQuan {
						font-weight: 400;
						color: #959da5;
						font-size: 14px;
					}
				}
			}
		}
	}
</style>
